<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>v-bind</title>
    <script type="text/javascript" src="../assets/vue.js"></script>
    <style>
        .classa{
            color: crimson;
        }
        .classb{
            color: aqua;
        }
    </style>
</head>
<body>

        <div id="app">
            <h3> {{message}}</h3>
            <hr>
            <img :src="imgsrc" :width="nwidth" :height="nht"/>
            <a :class="{classa:isok}">四方天和</a>
        </div>

        <script>
            // v-bind:src=''  简写-》 :src='',  v-bind 常用  是绑定 css  控制css属性
            //classa:isok   做判断  如果 isok 为 true  则 显示 classa

            var data = {
                imgsrc:'imges/shucai.jpg',
                nwidth:'300px',
                message:'v-bind  属性绑定 ， 把 html 元素的 属性 绑定 在data  数据中 ，用vue 直接控制',
                isok:1,
                nht:'300px'
            };

            var app = new Vue({
                el:'#app',
                data:data
            });

        </script>
</body>
</html>